<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>交易状态</span>
      </div>
      <div v-if="currentActived">
        <div v-if="timeRest >= 0">
          <el-row>
            <p class="fontStyle">距离本轮集中交易开始</p>
          </el-row>
          <p class="time" v-html="time"></p>
        </div>
        <div v-else style="line-height: 190px;font-size: 24px;">集中交易进行中 …</div>
      </div>
      <div v-else style="line-height: 190px;font-size: 24px;">交易已结束</div>
      <el-divider></el-divider>
      <el-row>
        <p class="fontStyle">距离下轮交易周期开始</p>
        <p class="time" v-if="!noNextTp" v-html="timeNext"></p>
        <p class="time" v-else><span>-</span>&nbsp;<span>-</span>:<span>-</span>&nbsp;<span>-</span>:<span>-</span>&nbsp;<span>-</span></p>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected situationData: any = {
    starttime: null,
    endtime: null,
    central_duration: null
  };
  @Prop()
  protected nextSituationData: any = {
    starttime: null
  };
  protected curStartTime: any = new Date();
  // protected day: any = null;
  // protected hour: any = null;
  // protected min: any = null;
  // protected second: any = null;
  protected time: any = "";
  protected timeRest: number = 1;
  protected currentActived: boolean = true;
  protected noNextTp: boolean = false;
  protected timeNext: any = "";
  protected interval: any = null;
  protected intervalNext: any = null;
  protected created() {
    // this.countTime();
  }
  @Watch("situationData", { deep: true })
  protected current() {
    this.timeRest = 0;
    if (this.interval) {
      clearInterval(this.interval);
    }
    const { starttime, endtime, central_duration }: any = this.situationData;
    let time: any =
      (endtime - (central_duration * 60)) - (new Date().getTime() / 1000);
      
    this.timeRest = time;
    this.time = this.countTime(time);
    let currentTime = Math.floor(new Date().getTime() / 1000);
    if (endtime < currentTime) {
      this.currentActived = false;
    } else {
      this.currentActived = true;
    }

    // 递归每秒调用countTime方法，显示动态时间效果,
    this.interval = setInterval(() => {
      if (endtime >= currentTime) {
        currentTime = Math.floor(new Date().getTime() / 1000);
        if (endtime < currentTime) {
          this.currentActived = false;
        }
      }
      this.time = this.countTime((time -= 1));
      if (time <= 0) {
        this.timeRest = time;
        clearInterval(this.interval);
      }
    }, 1000);
  }
  @Watch("nextSituationData", { deep: true })
  protected next() {
    if (!this.nextSituationData) return 
    if (this.intervalNext) {
      clearInterval(this.intervalNext);
    }
    if (this.nextSituationData && 'noData' in this.nextSituationData) {
      this.noNextTp = true;
    } else {
      this.noNextTp = false;
    }
    const { starttime }: any = this.nextSituationData;
    let time: any = starttime - (new Date().getTime() / 1000);
    this.timeNext = this.countTime(time);

    // 递归每秒调用countTime方法，显示动态时间效果,
    this.intervalNext = setInterval(() => {
      this.timeNext = this.countTime((time -= 1));
      if (time <= 0) {
        clearInterval(this.intervalNext);
      }
    }, 1000);
  }

  // 倒计时
  protected countTime(time: any) {
    let hour: any = "<span>0</span> <span>0</span>";
    let second: any = "<span>0</span> <span>0</span>";
    let min: any = "<span>0</span> <span>0</span>";
    if (time > 0) {
      // 时
      const h = Math.floor((time / 60 / 60) % 24);
      hour =
        h < 10
          ? `<span>0</span> <span>${h}</span>`
          : `<span>${h.toString().charAt(0)}</span> <span>${h
              .toString()
              .charAt(1)}</span>`;
      // 分
      const m = Math.floor((time / 60) % 60);
      min =
        m < 10
          ? `<span>0</span> <span>${m}</span>`
          : `<span>${m.toString().charAt(0)}</span> <span>${m
              .toString()
              .charAt(1)}</span>`;
      // 秒
      const s = Math.floor(time % 60);
      second =
        s < 10
          ? `<span>0</span> <span>${s}</span>`
          : `<span>${s.toString().charAt(0)}</span> <span>${s
              .toString()
              .charAt(1)}</span>`;
    }
    return `${hour} : ${min} : ${second}`;
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.cardBox {
  height: 525px;
  overflow: hidden;
  &.el-card {
    .el-card__header {
      padding: 30px 0 35px 0;
      font-size: 22px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #1a173b;
    }

    .fontStyle {
      // color: #077be8;
      font-size: 24px;
      line-height: 50px;
    }
    .numberStyle {
      font-size: 36px;
      margin-top: 10px;
    }
  }
}
.time {
  text-align: center;
  line-height: 50px;
  font-size: 30px;
  /deep/ span {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: rgba(7, 123, 232, 0.05);
    border-radius: 4px;
    color: #077be8;
  }
}
</style>


